<template>
  <div class="app-container">
    <div style="padding-top: 20px;border-bottom: 10px solid #EBEEF5;">
      <el-form :model=" queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="商铺编号" prop="shopId">
          <el-input v-model="queryParams.shopId" placeholder="请输入商铺编号" clearable @clear="resetQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="info" v-model="shopInfo">
      <div v-for="(item,index) in showlist" :key="item.index">
        <span>{{item.name}}</span>
        <span>{{item.value}}</span>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="常规收费" name="a">
        <el-row style="padding: 10px 0;">
          <el-button type="primary" icon="el-icon-plus" size="mini">收费</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini">历史信息</el-button>
          <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
        </el-row>

        <el-table :data="houseFeeList" show-header border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="收费项名称" prop="name"></el-table-column>
          <el-table-column label="起收日期" prop="starttime"></el-table-column>
          <el-table-column label="到期日期" prop="endtime"></el-table-column>
          <el-table-column label="缴费日期" prop="paymentDate"></el-table-column>
          <el-table-column label="单价" prop="price"></el-table-column>
          <el-table-column label="数量类型" prop="num_type">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_num_type" :value="scope.row.num_type" />
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="totalPrice"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="临时收费" name="b">
        <el-row style="padding: 10px 0;">
          <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
          <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
        </el-row>
        <el-table v-model="tempFeeList" show-header border>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="客户姓名" prop="username"></el-table-column>
          <el-table-column label="收费项目" prop="name"></el-table-column>
          <el-table-column label="付款方式" prop="feeType"></el-table-column>
          <el-table-column label="收费金额" prop="price"></el-table-column>
          <el-table-column label="收款人" prop="user"></el-table-column>
          <el-table-column label="收款时间" prop="recpt"></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column label="备注" prop="remember"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="收取押金" name="c">
        <el-row style="padding: 10px 0;">
          <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
          <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
        </el-row>
        <el-table v-model="depositList" show-header border>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="客户姓名" prop="username"></el-table-column>
          <el-table-column label="收费项目" prop="name"></el-table-column>
          <el-table-column label="付款方式" prop="feeType"></el-table-column>
          <el-table-column label="收费金额" prop="price"></el-table-column>
          <el-table-column label="收款人" prop="recptUser"></el-table-column>
          <el-table-column label="收款时间" prop="recptDate"></el-table-column>
          <el-table-column label="退款人" prop="refundUser"></el-table-column>
          <el-table-column label="退款时间" prop="refundDate"></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column label="备注" prop="remember"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="预存款" name="d">
        <el-row style="padding: 10px 0;">
          <el-button type="primary" icon="el-icon-plus" size="mini">预存</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini">退还</el-button>
          <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
        </el-row>
        <el-table show-header border>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="客户姓名" prop="username"></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column label="收费项目" prop="name"></el-table-column>
          <el-table-column label="付款方式" prop="feeType"></el-table-column>
          <el-table-column label="金额" prop="price"></el-table-column>
          <el-table-column label="收款人" prop="recptUser"></el-table-column>
          <el-table-column label="收款时间" prop="recptDate"></el-table-column>
          <el-table-column label="单号" prop="orderId"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>
      </el-tab-pane>
      <pagination v-show="page.total>0" :total="page.total" :page.sync="page.pageNum" :limit.sync="page.pageSize"
        @pagination="getHouseFeeList(queryParams.shopId)" />
    </el-tabs>
  </div>
</template>


<script>
  import {
    getShopInfo,
    getHouseFee
  } from '@/api/system/summary';
  export default {
    name: "Summary",
    dicts: ['sys_num_type'],
    data() {
      return {

        // 分页参数
        page: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
        // 刷新隐藏
        showSearch: true,
        //默认tab项
        activeName: 'a',
        //列表展示项
        showlist: [{
          name: '编号',
          value: null
        }, {
          name: '商铺状态',
          value: null
        }, {
          name: '到期日期',
          value: null
        }, {
          name: '占地面积',
          value: null
        }, {
          name: '使用面积',
          value: null
        }, {
          name: '行业',
          value: null
        }, {
          name: '客户姓名',
          value: null
        }, {
          name: '联系方式',
          value: null
        }, {
          name: '入住时间',
          value: null
        }],
        // 显示搜索条件
        showSearch: true,
        // shop对象
        shopInfo: {},
        // 查询搜索条件
        queryParams: {
          shopId: null
        },
        //常规收费
        houseFeeList: [],
        //临时收费
        tempFeeList: [],
        //押金
        depositList: []
      };
    },

    created() {

    },

    methods: {

      /**
       * 给展示项赋值
       */
      assignShowlist() {
        this.showlist[0].value = this.shopInfo.id;
        this.showlist[1].value = this.shopInfo.status === 1 ? '已出租' : (this.shopInfo.status === 2 ? '已出售' : '空置');
        this.showlist[2].value = this.shopInfo.paymentContract.endDate;
        this.showlist[3].value = this.shopInfo.allArea;
        this.showlist[4].value = this.shopInfo.realArea;
        this.showlist[5].value = this.shopInfo.paymentContract.userTrade;
        this.showlist[6].value = this.shopInfo.paymentContract.userName;
        this.showlist[7].value = this.shopInfo.paymentContract.userPhone;
        this.showlist[8].value = this.shopInfo.paymentContract.beginDate;
      },

      /** 搜索按钮操作 */
      handleQuery() {
        getShopInfo(this.queryParams.shopId).then(resp => {
          this.shopInfo = resp.data;
          // 赋值
          this.assignShowlist();
          // 查询店铺不为空查询相关常规收费项
          if (resp.data != null) {
            this.getHouseFeeList(resp.data.id);
          }
        })
      },

      // 获取常规收费项
      getHouseFeeList(id) {
        getHouseFee(id).then(resp => {
          this.houseFeeList = resp.rows;
          this.page.total = resp.total;
        })
      },

      /**
       * 重置按钮
       */
      resetQuery() {
        this.shopInfo = {};
        this.showlist = [{
          name: '编号',
          value: null
        }, {
          name: '商铺状态',
          value: null
        }, {
          name: '到期日期',
          value: null
        }, {
          name: '占地面积',
          value: null
        }, {
          name: '使用面积',
          value: null
        }, {
          name: '行业',
          value: null
        }, {
          name: '客户姓名',
          value: null
        }, {
          name: '联系方式',
          value: null
        }, {
          name: '入住时间',
          value: null
        }]
      }

    },
  }
</script>

<style scoped>
  .app-container {
    height: 80vh;
    padding: 0;
    border: 10px solid #EBEEF5;
  }

  .info {
    width: 740px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    font-size: 15px;
    padding: 14px 0 10px 20px;
  }

  .info div {
    width: 240px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    color: #606266;
    vertical-align: 25px;
  }

  .info span {
    display: inline-block;
    width: 88px;
  }

  .el-tabs {
    padding-left: 20px;
  }
</style>
